<template>
  <div class="map-container">
    <div id="container"></div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'

export default {
  setup () {
    const state = reactive({
    })

    onMounted(() => {
      initMap()
    })

    const initMap = () => {
      // 定义地图中心点坐标
      const center = new window.TMap.LatLng(39.984120, 116.307484)
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      const map = new window.TMap.Map(document.getElementById('container'), {
        center: center, // 设置地图中心点坐标
        zoom: 7.2, // 设置地图缩放级别
        showControl: false // 是否显示地图控件
      })
      console.log(map)

      const markerLayer = new window.TMap.MultiMarker({
        map: map,
        sttles: {
          myStyle: new window.TMap.MarkerStyle({
            width: 25, // 点标记样式宽度（像素）
            height: 35, // 点标记样式高度（像素）
            url: '/static/logo.jpg', // 图片路径
            anchor: { x: 16, y: 32 } // 焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
          })
        },

        // 点标记数据数组
        geometries: [{
          id: '1', // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
          styleId: 'myStyle', // 指定样式id
          position: new window.TMap.LatLng(39.954104, 116.357503), // 点标记坐标位置
          properties: { // 自定义属性
            title: 'marker1',
            info: 'info1'
          }
        }]
      })
      console.log(markerLayer)

      map.on('click', (evt) => {
        console.log(evt)
        markerLayer.add({
          position: evt.latLng
        })
      })
    }

    return {
      ...toRefs(state)
    }
  }
}
</script>

<style lang="scss" scoped>
.map-container {
  #container {
    width: 100%;
    height: 100%;
  }
}
</style>
